<template>
    <div class="time-capsule">
        <div class="title">
            <hourglass-full :fill="['#efefef', '#00000020']" size="24" theme="two-tone"/>
            <span>时光胶囊</span>
        </div>
        <span class="text">今日已经度过了&nbsp;{{ timeData.day.elapsed }}&nbsp;小时</span>
        <el-progress :percentage="timeData.day.pass" :stroke-width="20" :text-inside="true"/>
        <span class="text">本周已经度过了&nbsp;{{ timeData.week.elapsed }}&nbsp;天</span>
        <el-progress :percentage="timeData.week.pass" :stroke-width="20" :text-inside="true"/>
        <span class="text">本月已经度过了&nbsp;{{ timeData.month.elapsed }}&nbsp;天</span>
        <el-progress :percentage="timeData.month.pass" :stroke-width="20" :text-inside="true"/>
        <span class="text">今年已经度过了&nbsp;{{ timeData.year.elapsed }}&nbsp;个月</span>
        <el-progress :percentage="timeData.year.pass" :stroke-width="20" :text-inside="true"/>
        <div v-if="startDate?.length >= 4 && store.siteStartShow">
            <span class="text" v-html="startDateText"/>
            <el-progress
                    :duration="2"
                    :indeterminate="true"
                    :percentage="80"
                    :show-text="false"
                    :stroke-width="6"
            />
        </div>
    </div>
</template>

<script setup>
import {HourglassFull} from "@icon-park/vue-next";
import {getTimeCapsule, siteDateStatistics} from "@/utils/getTime.js";
import {mainStore} from "@/store";
import {onBeforeUnmount, onMounted, ref} from "vue";
import {START} from "@/utils/constants.js";

const store = mainStore();

// 进度条数据
const timeData = ref(getTimeCapsule());
const startDate = ref(START);
const startDateText = ref(null);
const timeInterval = ref(null);

onMounted(() => {
    timeInterval.value = setInterval(() => {
        timeData.value = getTimeCapsule();
        if (startDate.value) startDateText.value = siteDateStatistics(new Date(startDate.value));
    }, 1000);
});

onBeforeUnmount(() => {
    clearInterval(timeInterval.value);
});
</script>

<style lang="scss" scoped>
.time-capsule {
  width: 100%;

  .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0.2rem 0 1.5rem;
    font-size: 1.1rem;

    .i-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 6px;
    }
  }

  .text {
    display: block;
    margin: 1rem 0rem 0.5rem 0rem;
    font-size: 0.95rem;
  }
}
</style>
